<template>
  <div class="h-full overflow-y-auto">
    <PageHeader :title="$t('tenantAddress.商户收货地址管理')" />
    <SearchCom
      :searchList="searchList"
      @search="toSearch"
      @reset="handleReset"
    />
    <div class="mt12 toolbar flex_aic_jcsb">
      <div class="addBtn flex_aic_jcc" @click="handleAdd()" v-my-point="'tenantAddress:add'">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('tenantAddress.新增地址') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table"
      border
      v-loading="loading"
    >
      <el-table-column :prop="'name' + locale" :label="$t('tenantAddress.收货人')" />
      <el-table-column :prop="'phone'" :label="$t('tenantAddress.联系电话')" />
      <el-table-column :prop="'address' + locale" :label="$t('tenantAddress.收货地址')">
        <template #default="{ row }">
          {{ row["province" + locale] }}{{ row["city" + locale] }}{{ row["area" + locale]
          }}{{ row["address" + locale] }}
        </template>
      </el-table-column>
      <!-- <el-table-column :prop="'createTime'" :label="$t('tenantAddress.创建时间')" /> -->
      <el-table-column :prop="'updatedTime'" :label="$t('tenantAddress.更新时间')">
        <template #default="{ row }">
          {{ moment(row.updatedTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('tenantAddress.操作')">
        <template #default="{ row }">
          <div class="operationBtnRow">
            <el-button type="text" size="small" @click="handleEdit(row)" v-my-point="'tenantAddress:edit'"
              >{{ $t('tenantAddress.编辑') }}</el-button
            >
            <el-popconfirm
              :title="$t('tenantAddress.确定要删除此地址吗')"
              @confirm="handleDelete(row)"
              :confirm-button-text="$t('tenantAddress.确定')"
              :cancel-button-text="$t('tenantAddress.取消')"
              width="260px"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small" v-my-point="'tenantAddress:del'">{{ $t('tenantAddress.删除') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt10">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <AddEditDia
      v-model="showAddEditDia"
      :data="editData"
      @success="getDataList"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import SearchCom from "@/components/searchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import { useI18n } from "vue-i18n";
import moment from "moment";
import Api from "@/config/api/api";
import AddEditDia from "./addEditDia.vue";
import { ElMessage } from "element-plus";

const { locale, t } = useI18n();
const showAddEditDia = ref(false);
const editData = ref({});
const searchList = [
  {
    label: t('tenantAddress.联系人'),
    key: "name",
    type: "input",
  },
  {
    label: t('tenantAddress.联系电话'),
    key: "phone",
    type: "input",
  },
];

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(Api.tenantAddressPage);

const toSearch = (params) => {
  getDataList({
    ["name" + locale.value]: params.name,
    phone: params.phone,
  });
};

const handleAdd = () => {
  editData.value = {};
  showAddEditDia.value = true;
};

const handleEdit = (row) => {
  editData.value = row;
  showAddEditDia.value = true;
};

const handleDelete = (row) => {
  Api.deleteTenantAddress(row.id).then((res) => {
    if (res.status == 200) {
      ElMessage.success(t('tenantAddress.删除成功'));
      getDataList();
    }
  });
};
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
</style>
